<template>
  <div>
    <div class="insertBox" @click="handleAdd">+</div>
    <el-calendar v-model="value" @input="handleChange(value)">
      <template slot="dateCell" slot-scope="scope">
        <div :class="getCellStyle(scope.date)">
          <div style="display: flex;flex-direction: column">
            <div style="display: flex;justify-content: center;align-items: center">{{ scope.date.getDate() }}</div>
            <div style="display: flex;justify-content: space-between">
               <span v-for="(item ,index) in getEvents(scope.date)" class="mealBox">
              <span v-if="item==='中餐'" class="mealBoxOne">
              </span>
              <span v-if="item==='晚餐'" class="mealBoxTwo">
              </span>
            </span>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
    <div class="orderBox" v-for="(item,index) in activeDetails" :key="index" @click="toDetails(item.id)">
      <div class="orderName1">
        <div style="display: flex">
          <!--          <div>订餐人：</div>-->
          <div style="font-size: 18px;">{{ item.bookingName }}</div>
        </div>
        <div v-if="item.eatTime==='晚餐'" style="color:#f0a732 ">
          {{ item.eatTime }}
        </div>

        <div style="color:#248df5" v-else>{{ item.eatTime }}</div>
      </div>
      <div class="orderName">
        <!--        <div>订餐时间：</div>-->
        <div style="color: #949494;margin : 5px 0px">{{ item.bookingTime }}</div>
      </div>
      <div style="display: flex;justify-content: space-between">
        <div class="orderName">
          <div
            style="color: #fff;background-color:#f0a732;width: 20px;height: 20px;border-radius: 3px;text-align: center;padding: 3px">
            数
          </div>
          <div style="margin:3px 0px 0px 5px ">{{ item.number }}人</div>
        </div>
        <div class="orderName">
          <div
            style="color: #fff;background-color:#248df5;width: 20px;height: 20px;border-radius: 3px;text-align: center;padding: 3px">
            标
          </div>
          <div style="margin:3px 0px 0px 5px ">{{ item.mealLabel }}</div>
        </div>
      </div>

    </div>
    <div class="orderBoxNo" v-if="activeDetails.length===0"
    >暂无订餐信息
    </div>
  </div>
</template>

<script>
  import {bookInsert, bookList, wxLogin} from "@/request/request.js";

  export default {
    data() {
      return {
        value: new Date(),
        selectedDates: [],
        dialogFormVisible: false,
        form: {
          bookingName: "",
          number: '',
          bookingTime: '',
          mealLabel: '',
          eatTime: ''
        },
        activeday: [],
        activeDetails: []
      };
    },
    mounted() {
      // 检查是否是从微信授权回调回来
      if (this.isWeixinCallback()) {
        this.handleWeixinCallback().then(() => {
          this.getList(); // 成功获取 token 后立即获取数据
        });
      } else {
        this.getList(); // 直接获取数据
      }
    },
    methods: {
      isWeixinCallback() {
        return new URLSearchParams(window.location.search).has('code');
      },
      async handleWeixinCallback() {
        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get('code');
        if (code) {
          // 发送 POST 请求到你的后端 API
          const res = await wxLogin({code});
          if (res.code === 200) {
            localStorage.setItem('token', res.token)
            localStorage.setItem('nickName', res.nickName)
            // 跳转到首页或其他页面
            this.$router.push('/');
          }
        } else {
          console.error('没有找到 code 参数');
        }
      },
      toDetails(id) {
        this.$router.push({
          path: '/details',
          query: {id}
        });
      },
      handleAdd() {
        this.$router.push('/insert')
      },
      getList() {
        bookList(this.form).then(res => {
          if (res.code = 200) {
            this.activeday = res.data
            this.handleChange(this.value)
          } else {
            this.activeDetails = []
          }
        }).catch(error => {
          // 处理任何可能发生的错误
          console.error('Error fetching data:', error);
          this.activeDetails = [];
        });
      },
      submit() {
        this.dialogFormVisible = false
        bookInsert(this.form).then(res => {
            if (res === 1) {
              this.$message.success('新增成功');
              this.form.bookingTime = ''
              this.getList()
            } else {
              return false
            }
          }
        )
        this.form = {
          bookingName: "",
          number: '',
          bookingTime: '',
          mealLabel: '',
          eatTime: ''
        }
      },
      handleChange(value) {
        this.value = value;
        this.form.bookingTime = this.formatDate(value)
        bookList(this.form).then(res => {
            if (res.code === 200) {
              this.activeDetails = res.data
            } else {
              this.activeDetails = []
            }
          }
        )
      },
      getEvents(date) {
        let dateString = this.formatDate(date);
        let result = [];
        for (let item of this.activeday) {
          if (item.bookingTime === dateString) {
            result.push(item.eatTime)
          }
        }
        // 返回结果，注意这里不再需要去除结尾的分隔符
        return result;
      },
      formatDate(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
      },
      openDialog() {
        this.dialogFormVisible = true;
      },
      isDateSelected(date) {
        return this.selectedDates.some(selectedDate => {
          selectedDate.getTime() === date.getTime()
        });
      },
      getCellStyle(date) {
        if (this.isDateSelected(date)) {
          return 'is-selected';
        }
        return '';
      }
    }
  };
</script>
<style>
  .el-calendar-table__row td {
    border: none !important;

  }

  .el-calendar-day {
    height: 32px;
    text-align: center;
  }

  .el-calendar-table .is-selected {
    color: #248df5 !important;
    background-color: #f2f8fe !important;
    border: 1.5px solid #248df5 !important;
    border-radius: 5px !important;
  }

  .el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    padding: 8px;
    height: 65px !important;
  }

  .el-calendar__title {
    color: #000000;
    font-size: 22px !important;
    -ms-flex-item-align: center;
  }

  .el-calendar__body {
    padding: 12px 20px 15px 20px !important;
  }
</style>
<style scoped>
  .mealBoxOne {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #248df5;
    margin-top: 10px;
    /*display: flex;*/
    display: inline-block;
  }

  .mealBoxTwo {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f0a732;
    margin-top: 10px;
    display: inline-block;
  }

  .orderBoxNo {
    border: 1px solid #eeeeee;
    box-shadow: 5px 5px 20px 1px rgba(114, 130, 138, 0.1);
    margin: 10px 20px;
    padding: 10px;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
  }

  .insertBox {
    font-size: 30px;
    display: flex;
    justify-content: end;
    margin-right: 30px;
  }

  .is-selected {
    color: #248df5;
  }

  .orderName1 {
    display: flex;
    justify-content: space-between;
    font-family: 'Microsoft YaHei', sans-serif;
  }

  .orderName {
    display: flex;
    /*justify-content: space-between;*/
    font-family: 'Microsoft YaHei', sans-serif;
  }

  .orderBox {
    border: 1px solid #eeeeee;
    box-shadow: 5px 5px 20px 1px rgba(114, 130, 138, 0.1);
    margin: 10px 20px;
    padding: 10px;
    border-radius: 8px; /* 添加这一行 */
  }
</style>
